<template>
  <div class="Register">
    <img class="registerImg" src="https://yanxuan.nosdn.127.net/static-union/164793255107785e.png" alt="">
    <van-form @submit="onSubmit" ref="formRef">
      <van-cell-group inset>
        <van-field v-model="username" name="手机号" label="手机号" placeholder="请输入你的手机号"
        :rules="[{ validator: validatorMessage1 }]" />

        <van-field v-model="code1"  name="验证码" label="验证码" placeholder="请输入验证码"
        :rules="[{ validator: validatorMessage2 }]" />
        <button class="getcode" @click="getCode">获取验证码</button>

        <van-field v-model="password1" type="password"  autocomplete=“off” name="登录密码" label="登录密码" placeholder="请输入密码"
        :rules="[{ validator: validatorMessage3 }]"  />

        <van-field v-model="repassword" type="password"  autocomplete=“off” name="确认密码" label="确认密码" placeholder="请输入确认密码"
        :rules="[{ validator: validatorMessage4 }]"/>

        <van-field name="复选框" :rules="[{ validator: validatorMessage5 }]">
          <template #input>
            <van-checkbox v-model="checked" icon-size="14px" shape="square">同意协议并注册《网易严选用户协议》</van-checkbox>
          </template>
        </van-field>
      </van-cell-group>
    
      <div style="margin: 16px;">
        <van-button @click="register" round block type="danger" native-type="submit">
          注册
        </van-button>
      </div>
    </van-form>
    <div class="toLogin" @click="toLogin"><a>已有账号？去登录</a></div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'Register'
})
</script>
<script lang="ts" setup>
// 引入封装的api
import center from '@/api/center'
import router from '@/router';
import { showFailToast, showSuccessToast } from 'vant';
import { ref } from 'vue'
const username = ref('');
const password1 = ref('');
const repassword = ref('');
const code1 = ref('')
const checked = ref(true);
const onSubmit = (values: any) => {
  // console.log('submit', values);
};
const onFailed= (errorInfo:any)=>{
  console.log('errorInfo:',errorInfo)
}
// 获取验证码
const getCode = async() => {
  // 传入参数 调用 API 接口
  const res = await center.reqSendCode(username.value as string)
  // console.log(res);
  // 把获取到的验证码赋值给 验证码的 input框 方便后续开发
  code1.value = res.data as string
}

//获取form表单
const formRef = ref()
// 注册账号
const register = async () => {
  const isReg =await formRef.value.validate()
  // console.log(isReg); // undefined
  if(isReg === undefined){
    // 组织参数
    let phone = username.value
    let code = code1.value 
    let password = password1.value
    const params = { phone,password , code}
    // 携带参数发送请求
    const res = await center.reqRegister(params)
    console.log(res);
    if((res.code)as number === 200) {
      showSuccessToast('账号以注册成功,请登录！')
      setTimeout(() => {
        // 注册成功跳转到登录页面
        router.push('/login')
      }, 1000);
    } else {
      showFailToast(res.message)
    }
  }
}

// 点击去到注册界面
const toLogin = () => {
  router.push('/login')
}

// 手机号正则
const phoneReg = /^1[3-9]\d{9}$/
// 密码正则
const passwordReg = /^(?![a-zA-Z]+$)(?![0-9]+$)[A-Za-z0-9]{8,18}$/
// 验证码正则
const codeReg = /^\d{6}$/

// 输入校验
// 1. 手机号校验
const validatorMessage1 = (val:any):any => {
  if(!phoneReg.test(val)){
    return `${val} 手机号不合法，请重新输入`;
  }
}
// 2. 验证码校验
const validatorMessage2 = (val:any):any => {
  // if(!codeReg.test(val)){
  //   return `验证码错误`;
  // } 
  if(val === ''){
    return `请输入验证码`;
  } else if(!codeReg.test(val)){
    return `验证码错误`;
  } 
}
// 3. 密码校验
const validatorMessage3 = (val:any):any => {
  if(!passwordReg.test(val)){
    return `密码必须8-18位,由字母、数字组成，区分大小写`;
  }
}
// 4. 重复密码校验
const validatorMessage4 = (val:any):any => {
  if(val !== password1.value){
    return `重复密码输入错误，请检查重新输入`;
  }
}
// 5. 复选框验证
const validatorMessage5 = (val:any):any => {
  if(val===false){
    return '请同意条款'
  }
}

</script>
<style lang="less" scoped>
.Register {
  height: 100%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .registerImg {
    width: 134px;
    height: 45px;
    margin-top: 10%; 
    position: relative;
  }
  .getcode {
    position: absolute;
    top: 140px;
    right: 10px;
    font-size: 16px;
    height: 25px;
  }
  :deep(.van-checkbox) {
    // margin-left: 32px;
    .van-checkbox__label{
      font-size: 15px;
    }
  }
  .toLogin{
  font-size: 20px;
  font-weight: bold;
}
}
</style>
